<template>
  <div style="height: 100%">
    <el-container style="height: 100%;">
      <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238,241,246);height:100%; box-shadow: 2px 0 6px rgba(0 21 41 0.35)">
        <Aside :isCollapse="isCollapse" />
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 1px solid #89B8CA">
          <Header :collapse="collapse" :collapseBtnClass="collapseBtnClass"/>
        </el-header>

        <el-main>
<!--          当前页面的子路由会在router-view里面展示-->
          <router-view />
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

<script>

  import Aside from "../../components/Aside";
  import Header from "../../components/Header";

  export default {
    name: "Manager",

    data() {
      return {
        collapseBtnClass: 'el-icon-s-fold',
        isCollapse: false,
        sideWidth: 200
      }
    },
    components:{
      Aside,
      Header
    },

    methods: {
      collapse() {//点击收缩按钮触发
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {//收缩
          this.sideWidth = 64
          this.collapseBtnClass = 'el-icon-s-unfold'
        } else {//展开
          this.sideWidth = 200
          this.collapseBtnClass = 'el-icon-s-fold'
        }
      }
    },
  }

</script>

